extends ../wechat

block content
  style.
    .ball {
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }
    .ball1 {
      background: red;
    }
    .ball2 {
      background: yellow;
    }
    .ball3 {
      background: green;
    }

  .ball.ball1(style="margin-left: 0;")
  .ball.ball2(style="margin-left: 0;")
  .ball.ball3(style="margin-left: 0;")

  script(src='http://res.cloudinary.com/moveha/raw/upload/v1438413173/dist/lib/bluebird-2.9.34/bluebird.min.js')
  script.
    var ball1 = document.querySelector('.ball1')
    var ball2 = document.querySelector('.ball2')
    var ball3 = document.querySelector('.ball3')
    var Promise = window.Promise

    function promiseAnimate(ball, distance) {
      return new Promise(function(resolve, reject) {
        function _animation() {
          setTimeout(function() {
            var marginLeft = parseInt(ball.style.marginLeft, 10)

            if (marginLeft === distance) {
              resolve()
            }
            else {
              if (marginLeft < distance) {
                marginLeft++
              }
              else {
                marginLeft--
              }

              ball.style.marginLeft = marginLeft + 'px'
              _animation()
            }
          }, 14)
        }

        _animation()
      })
    }

    promiseAnimate(ball1, 60)
      .then(function() {
        return promiseAnimate(ball2, 150)
      })
      .then(function() {
        return promiseAnimate(ball3, 250)
      })
      .then(function() {
        return promiseAnimate(ball3, 120)
      })
      .then(function() {
        return promiseAnimate(ball2, 120)
      })
      .then(function() {
        return promiseAnimate(ball1, 120)
      })
